<template>
  <view
    :class="['nav', firstPage ? 'first-page' : '', fixed ? 'nav-fixed' : '']"
    :style="{ height: `${navBarInfo.navBarHeight}px`, paddingTop: `${navBarInfo.statusBarHeight}px`, backgroundImage: bgImage, backgroundColor: bgColor }">
    <view class="nav-main">
      <view
        :style="{
          backgroundImage: iconImg,
          width: `${navBarInfo.menuHeight}px`,
          height: `${navBarInfo.menuHeight}px`,
        }"
        class="back"
        @click="back"
        v-if="showBack"></view>
      <view class="title-view">
        <text class="title" :class="{ black: blackTitle }">{{ title }}</text>
        <!-- <slot></slot> -->
      </view>
      <!-- 胶囊区域 -->
      <view
        class="capsule-box"
        :style="{
          width: `${navBarInfo.menuWidth}px`,
          height: `${navBarInfo.menuHeight}px`,
          lineHeight: `${navBarInfo.menuHeight}px`,
          bottom: `${navBarInfo.menuBottom}px`,
          right: `${navBarInfo.menuRight}px`,
        }"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { APP_NAME } from '@/common/constants'
export default {
  name: 'Title',
  props: {
    showBack: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: false
    },
    homePage: {
      type: Object,
      default () {
        return {}
      }
    },
    title: {
      type: String,
      default: APP_NAME
    },
    blackTitle: {
      type: Boolean,
      default: false
    },
    bgImage: {
      type: String,
      default () {
        return null
      }
    },
    bgColor: {
      type: String,
      default () {
        return null
      }
    },
    theme: {
      type: String,
      default: 'white'
    }
  },
  data () {
    return {
      firstPage: false
    }
  },
  computed: {
    ...mapState({
      navBarInfo: (state) => state.navBarInfo
    }),
    iconImg () {
      const isBlack = this.theme !== 'white'
      return this.firstPage
        ? this.backgroundUrl(`images/components/common/nav_icon_home${isBlack ? '_b' : ''}.png`)
        : this.backgroundUrl(`images/components/common/nav_icon_back${isBlack ? '_b' : ''}.png`)
    }
  },
  methods: {
    checkPageStatus () {
      const pages = getCurrentPages()
      const firstPageLen = 1
      if (pages.length === firstPageLen) {
        this.firstPage = true
      }
    },
    back () {
      if (this.firstPage) {
        uni.switchTab({ url: '/pages/index/index' })
        return
      }
      uni.navigateBack({
        delta: 1
      })
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted () {
    this.checkPageStatus()
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate () {},
  // 组件周期函数--监听组件数据更新之后
  updated () {},
  // 组件周期函数--监听组件激活(显示)
  activated () {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated () {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy () {}
}
</script>

<style scoped lang="less">
.nav {
  width: 100vw;
  box-sizing: border-box;
  background-size: cover;
}

.nav.nav-fixed {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
}

.nav-blank {
  width: 100vw;
}

.nav-main {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 100%;
}

.capsule-box {
  position: absolute;
}

.back {
  position: absolute;
  left: 0;
  box-sizing: border-box;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 17rpx 31rpx;
}

.nav.first-page .back {
  background-size: 42rpx 38rpx;
  margin-left: 16rpx;
}

.title-view {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 32rpx;
  color: #ffffff;
  text-indent: -1em;

  .title {
    font-size: 32rpx;
    line-height: 45rpx;
    font-weight: 500;
    color: white;
    &.black {
      color: black;
    }
  }
}
</style>
